﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Bling商城</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/Reset.css">
    <style type="text/css">
    a{
        color:#000;
    }
        .P1 {
            height: 1rem;
            line-height:1rem;
            margin-left: 2.38rem;
            font-size: 0.34rem;
         
            color: rgba(47,47,47,1);

        }
        .P2 {
            position: absolute;
            top: 1.0rem;
            margin-top:-0.45rem;
            left: 50%;
            transform: translateX(-50%);
            color: #FEFEFE;
            letter-spacing:0.12rem;
        }
        /*图片样式*/
        .pan {
            background-color:#f6f5f5;
            width:100%;
            min-height: 10.25rem;
            margin-top:-0.1rem;
        }
            .pan > a {
                float: left;
                width: 46%;
                margin-top: 0.2rem;
                padding-left: 0.2rem;
             
            }
            .pan >a:last-of-type{

                margin-bottom: 0.2rem;
            }
        .img1 {
            height: 4.5rem;
            border-radius: 5px;
            box-shadow: 0px 0px 10px #ddd;
        }
        .pan .img1 img {
            width: 100%;
            height: 3.1rem;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .P3 {
            background:rgba(246,246,246,1);
            border-radius:0.1rem; 
            height:0.4rem;
            width:1.05rem;
            text-align:center;
            line-height:0.4rem;
            font-size:0.26rem;
            color:#808080;
            float: right;
            margin-right: 0.15rem;
        }
       .title{
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-size:0.32rem;
            margin:0;
            padding-left: 0.2rem;
            padding-top: 0.15rem;
       }
    </style>
</head>
<body>
    <div>
        <!--标题-->
        <div style="height:1rem; line-height:1rem;width:100%;">
         <a><img src="./images/back.png" alt="" style="margin-left:0.35rem;height:0.35rem; line-height:1rem;margin-top: 0.3rem;"></a>
           
            <span class="P1">
                Bling商城     
            </span>
           <a href="ForRecord.html" style="float: right;color:#2F2F2F;"><span style="float:right;font-size:0.32rem; margin-right:0.3rem;margin-top:0.05rem;">兑换记录</span></a> 
        </div>
        <!--当前余币-->
        <div style=" width: 100%; height: 2.18rem; position:relative;">
            <img src="images/orderdetaile.png" style="background-repeat:no-repeat;width:100%;height:2rem;"/>
            <span style="font-size:0.32rem;" class="P2">当前<span class="customer_blings" style="font-size:0.8rem;">350</span>币</span>
        </div>
        <!--商品展示-->
        <div class="pan" style="overflow:hidden;">
          
            
        </div>
    </div>
</body>

<script src="js/jquery-1.11.0.min.js"></script>
<script>
    $(function () {

        $.ajax({
            url: 'http://192.168.1.44/shop/Shop/index',
            type: 'get',
            data: {},
            success: function (datas) {
                var data = JSON.parse(datas)
                console.log(data);
                localStorage.setItem("customer_id",data.data.customer_id);
                // console.log(localStorage.getItem("customer_id"))
                $('.customer_blings').text(data.data.customer_blings);
                var html = '';
                $.each(data.data.info, function (i, e) {
                    var th = '<span class="P3" >已兑完</span>';
                    if (e.stock>0) {
                       th = '';
                    }
                    html += '<a data-id='+e.goods_id+'">'
                        + '<div class="img1" style=" position: relative;background-color:#FEFEFE; ">'
                        + '<img src="' + e.img + '" />'
                        + '<div style="width:100%;height:0.01rem;background-color:#EAEAEA; position:absolute;top:3rem;"></div>'
                        + '<p class="title">' + e.title + '</p>'
                        + '<p style="padding-left: 0.2rem; padding-top: 0.23rem;">'
                        + '<span style="font-size:0.4rem;color:#FF7C35;">' + e.blings + '</span>'
                        + '<span style="font-size:0.28rem;">币</span>'
                     
                        + th
                   
                        + '</p></div></a>';
                })
                $('.pan').html(html);
            }
        });
        $('.pan').on('click','a',function(){
            var id = $(this).attr('data-id');
            localStorage.setItem('urlId',id);
            window.location.href = 'CommodityDetailsPage.html'
        });
    })
</script>
<!--rem JS-->
<script>
    (function (designWidth, maxWidth) {
        var doc = document,
            win = window,
            docEl = doc.documentElement,
            remStyle = document.createElement("style"),
            tid;
        function refreshRem() {
            var width = docEl.getBoundingClientRect().width;
            maxWidth = maxWidth || 540;
            width > maxWidth && (width = maxWidth);
            var rem = width * 100 / designWidth;
            remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
        }
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(remStyle);
        } else {
            var wrap = doc.createElement("div");
            wrap.appendChild(remStyle);
            doc.write(wrap.innerHTML);
            wrap = null;
        }
        refreshRem();
        win.addEventListener("resize", function () {
            clearTimeout(tid)
            tid = setTimeout(refreshRem, 300);
        }, false);
        win.addEventListener("pageshow", function (e) {
            if (e.persisted) {
                clearTimeout(tid);
                tid = setTimeout(refreshRem, 300);
            }
        }, false);
        if (doc.readyState === "complete") {
            doc.body.style.fontSize = "16px";
        } else {
            doc.addEventListener("DOMContentLoaded", function (e) {
                doc.body.style.fontSize = "16px";
            }, false);
        }
    })(750, 750);
</script>
</html>